<template>
  <div>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">事项编号：{{ listdata.number }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">上报人：{{ listdata.reportPerson }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">上报时间：{{ listdata.createTime }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8" style="cursor: pointer" @click.native="openClik"
        >事件地点：<i class="el-icon-map-location" style="font-size: 20px"></i>{{ listdata.location }}</el-col
      >
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">上报人所属网格：{{ listdata.grid }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">上报人电话：{{ listdata.reportPhone | PhoneFormat }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">问题类型：{{ listdata.subTypeName }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">问题描述：{{ listdata.mdescribe }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">事件来源：{{ listdata.matterSourceName }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8" v-show="listdata.status == 3">退回原因：{{ listdata.returncause }}</el-col>
      <el-col :span="8" v-show="listdata.status != 3"></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-show="listdata.voice">
      <el-col :span="9"
        >音频文件：<audio
          ref="audio"
          :src="listdata.voice"
          autoplay="autoplay"
          preload="auto"
          controls="controls"
        ></audio>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="8"> </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="3">图片证明:</el-col>
      <el-col :span="5">
        <el-image
          style="width: 120px; height: 120px"
          :src="listdata.preImgList[0]"
          :preview-src-list="listdata.preImgList"
        >
        </el-image
      ></el-col>
      <el-col :span="5"
        ><el-image
          style="width: 120px; height: 120px"
          :src="listdata.preImgList[1]"
          :preview-src-list="listdata.preImgList"
          v-show="listdata.preImgList[1]"
        >
        </el-image
      ></el-col>
      <el-col :span="5"
        ><el-image
          style="width: 120px; height: 120px"
          :src="listdata.preImgList[2]"
          :preview-src-list="listdata.preImgList"
          v-show="listdata.preImgList[2]"
        >
        </el-image
      ></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">事项进度：{{ listdata.statusName }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8" v-show="listdata.status == 7">
        处置部门：<span @click="idGetUser"
          >{{ listdata.responsibilityName }}
          <span v-show="!assignedUser">
            <a href="javascript:void(0);">查看人员</a><i class="el-icon-caret-right"></i></span
        ></span>
        <span v-show="assignedUser"> - {{ assignedUser }}</span>
      </el-col>
      <el-col :span="8" v-show="listdata.status == 9">退回理由：{{ listdata.returncause }}</el-col>
      <el-col :span="8" v-show="listdata.status == 5">作废原因：{{ listdata.invalidResult }}</el-col>
      <el-col :span="8" v-show="listdata.status == 3"></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="10">
        <div :class="{ timeBox: true, hideBox: timeHide }">
          <el-timeline :reverse="true">
            <el-timeline-item v-for="(activity, index) in process" :key="index" :timestamp="activity.time">
              {{ activity.clue }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div v-if="process.length > 2" class="more" @click="timeMore">
          <i :class="timeHide ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i> 查看更多
        </div>
      </el-col>
      <el-col :span="10"></el-col>
    </el-row>
    <el-dialog :append-to-body="true" top="30px" :visible.sync="centerDialogVisible" width="80%" center>
      <BDmap v-if="centerDialogVisible" :childmessage="message" :locations="location"></BDmap>
    </el-dialog>
  </div>
</template>

<script>
import Seats from '@/api/Seats'
import { PhoneFormat } from '@/utils/pipe'
import api from '@/api/api'
export default {
  props: {
    listdata: {
      type: Object,
      default() {
        return {}
      },
    },
    winState: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      message: {},
      location: '',
      show: false,
      centerDialogVisible: false,
      process: [],
      timeHide: true,
      assignedUser: '',
    }
  },
  created() {
    this.getclue()
  },
  watch: {
    deep: true,
    listdata(oldval, newval) {},
    winState: function (e) {
      if (e) {
        this.getclue()
      }
    },
  },
  methods: {
    async openClik() {
      this.location = this.listdata.location
      await Seats.convert(this.listdata.latitude, this.listdata.longitude).then(e => {
        this.message.lat = e.lat
        this.message.lng = e.lng
        this.centerDialogVisible = true
      })
    },
    getclue() {
      api.getclue({ matterId: this.listdata.matterId }).then(res => {
        if (res.code == 200) {
          this.process = res.data
        }
      })
    },
    timeMore() {
      this.timeHide = !this.timeHide
    },
    idGetUser() {
      Seats.idGetUser({ id: this.listdata.responsibilityId }).then(res => {
        this.assignedUser = res.data.fullName
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.el-row {
  font-size: 14px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
.timeBox {
  ::v-deep .el-timeline-item__content {
    line-height: 2;
  }
}
.hideBox {
  height: 120px;
  overflow: hidden;
}
.more {
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
}
</style>
